<template>
    <view class="d-kuan d-shang-20">
        <!-- 使用扁平化后的数据进行循环显示，每行显示5个 -->
        <view class="url-container ">
            <view v-for="(item, index) in flattenedUrlData" :key="index" class="url-item d-chaochu-1" @click="handleClick(item.url)">
                <uv-icon name="list" color="#9c9c9c" size="20" :label="item.name"></uv-icon>
            </view>
        </view>

    </view>
</template>

<script>
export default {
    props: {
        url_data_list: {
            type: Array,
            default: () => [],
        }
    },
    
    computed: {
        // 扁平化嵌套的数据结构，使其能够正确循环显示
        flattenedUrlData() {
            const result = [];
            
            if (Array.isArray(this.url_data_list)) {
                this.url_data_list.forEach(item => {
                    if (typeof item === 'object' && item !== null) {
                        // 检查是否是嵌套结构 { "1": { "name": "wangzhi", "url": "123456" } }
                        const hasNumericKey = Object.keys(item).some(key => !isNaN(key));
                        
                        if (hasNumericKey) {
                            // 处理嵌套结构：提取数值键对应的对象
                            for (const key in item) {
                                if (item[key] && typeof item[key] === 'object') {
                                    result.push(item[key]);
                                }
                            }
                        } else {
                            // 处理普通对象结构
                            result.push(item);
                        }
                    }
                });
            }
            
            return result;
        }
    },
    
    methods: {
        // 处理链接点击事件
        handleClick(url) {
            if (url) {
                console.log(url);
                // 确保URL格式正确，添加http://前缀（如果没有）
                let fullUrl = url;
                if (!fullUrl.startsWith('http://') && !fullUrl.startsWith('https://')) {
                    fullUrl = 'http://' + fullUrl;
                }
                
                // #ifdef APP-PLUS
                // 在App平台使用plus.runtime.openURL打开外部链接
                plus.runtime.openURL(fullUrl);
                // #endif
                
                // #ifdef H5
                // 在H5平台使用window.open打开外部链接
                window.open(fullUrl);
                // #endif
                
                // #ifdef MP
                // 在小程序平台复制链接到剪贴板并提示用户
                uni.setClipboardData({
                    data: fullUrl,
                    success: () => {
                        uni.showToast({
                            title: '链接已复制，请在浏览器中粘贴打开',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                });
                // #endif
            }
        }
    }
}
</script>

<style>
/* 容器样式，使用flexbox布局实现每行显示5个元素 */
.url-container {
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
}

/* 每个链接项的样式 - 默认显示2个一行 */
.url-item {
  flex: 0 0 calc(48.5% - 30px); /* 50%宽度减去间距 */
  margin: 5px;
  padding: 8px 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
  text-align: center;
  word-break: break-all;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 媒体查询 - 屏幕宽度大于1220px时显示4个一行 */
@media screen and (min-width: 1221px) {
  .url-item {
    flex: 0 0 calc(21.5% - 10px); /* 25%宽度减去间距 */
  }
}

/* 悬停效果 */
.url-item:hover {
  background-color: #e8e8e8;
  transform: translateY(-1px);
}
</style>